<!DOCTYPE html>
<!--改成jsp，有一个缺点：
1、jsp其实它就是一个java程序
2、jsp->xx。java
3、编译-》xx.class

1、性能慢要翻译和编译


2、公司政策走向，影响这个技术
jsp这个技术“已经过时”了，强依赖与tomcat
现在公司里面不一定用tomcat，特别是政府项目，国产化

-》很老的程序，jsp连都没有

3、前端和后端不好配合
xx.jsp 你的样式很乱，让前端来调

换一种解决方案：当前市场比较流行的后端视图渲染框架
Thymeleaf


-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的好友列表</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<!--<h1 th:text="${tx}"></h1>
<h1>
    用户的姓名是:<span th:text="${user.name}"></span>
</h1>
<h1>
    用户的年龄是:<span th:text="${user.age + 1}"></span>
    <span th:if="${user.age > 18}">已成年</span>
    <span th:unless="${user.age > 18}">未成年</span>
</h1>

<h1 th:text="${list.get(0)}"></h1>

&lt;!&ndash;遍历集合&ndash;&gt;
<p th:each="item:${list}" th:text="${item}"></p>-->

<!--蝴蝶飞飞假如它是4级：★★★★-->
写一个循环遍历数字：从1开始到4结束
<!--
    for(int i = 1; i <= 4; i++)
-->
<!--<h1 th:each="i : ${#numbers.sequence(1,1)}">
    ★
</h1>-->


<div class="container-fluid">

    <!-- 查询栏目 -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search"  placeholder="根据QQ号搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据关系搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">好友</option>
                    <option value="1">黑名单</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据好友昵称搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据性别搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据省份搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据城市搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据住址搜索" aria-label="Search">

            </form>
        </div>
    </nav>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据状态搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">在线</option>
                    <option value="1">离线</option>
                    <option value="2">隐身</option>
                </select>


                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">-
                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <!-- 列表栏目 -->
    <div class="row" >

        <div class="bd-example">
            <p class="fs-6">我：蝴蝶飞飞 ， 当前等级为：1，我的好友共：49个（包含黑名单）</p>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">头像</th>
                    <th scope="col">好友QQ号码</th>
                    <th scope="col">我们的关系</th>
                    <th scope="col">好友昵称</th>
                    <th scope="col">性别</th>
                    <th scope="col">年龄</th>
                    <th scope="col">省份</th>
                    <th scope="col">城市</th>
                    <th scope="col">住址</th>
                    <th scope="col">电话</th>
                    <th scope="col">状态</th>
                    <th scope="col">等级</th>
                </tr>
                </thead>
                <tbody>
<!--                item是一个QQUserBO-->
                <tr th:each="item : ${page.getRecords()}">
                    <th  scope="row">
<!--                        根据性别来判断:0,1-->
                        <span th:switch="${item.baseInfoBean.sex}">
                            <img th:case="0" src="images/男.jpeg" width="30" height="">
                            <img th:case="1" src="images/女.jpeg" width="30" height="">
                        </span>
<!--                        <img src="images/男.jpeg" width="30" height="">-->
                    </th>
                    <th scope="row">
                        <span th:text="${item.userBean.qqid}"></span>
                    </th>
                    <td>
                        <span th:switch="${item.relationBean.relationStatus}">
                            <span class="text-success" th:case="0">好友</span>
                            <span style="color:red" th:case="1">黑名单</span>
                        </span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.nickName}"></span>
                    </td>
                    <td>
                           <span th:switch="${item.baseInfoBean.sex}">
                               <span th:case="0">男</span>
                               <span th:case="1">女</span>
                        </span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.age}"></span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.province}"></span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.city}"></span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.address}"></span>
                    </td>
                    <td>
                        <span th:text="${item.baseInfoBean.phone}"></span>
                    </td>
                    <td>
                            <span th:switch="${item.userBean.onLine}">
                            <span  class="text-primary" th:case="0">在线</span>
                            <span style="color:red" th:case="1">离线</span>
                            <span style="color:red" th:case="2">隐身</span>
                        </span>
                    </td>
                    <td>
                        <!-------------------------------start等级小于5显示三角星------------------------------------------->
                        <span th:if="${item.userBean.level < 5}" th:each="i : ${#numbers.sequence(1,item.userBean.level)}">
                           ★
                        </span>
                        <!-------------------------------end等级小于5显示三角星------------------------------------------->


                        <!--------------------------------start等于大于5显示月亮--------------------------------------------->
                        <span th:if="${item.userBean.level >= 5 && item.userBean.level < 25}">

                          <span th:each="i : ${#numbers.sequence(1,item.userBean.level / 5)}">
                              ☪
                          </span>
                          <span th:if="${item.userBean.level % 5 != 0}" th:each="i : ${#numbers.sequence(1,item.userBean.level % 5)}">
                               ★
                          </span>
                        </span>
                        <!-------------------------------end等于大于5显示月亮--------------------------------------------->

                        <!-------------------------------等于大于25显示太阳------------------------------->
                        <span th:if="${item.userBean.level >= 25}">

                                <!--                            太阳个数-->
                            <span th:each="i : ${#numbers.sequence(1,item.userBean.level / 25)}">◐</span>
                            <!--                            星星个数-->
                             <span th:if="${item.userBean.level % 25 != 0 && item.userBean.level % 25 < 5 }">
                                <span th:each="i : ${#numbers.sequence(1,item.userBean.level % 25)}">
                                 ★
                                </span>
                             </span>

                            <!--                            30级得情况-->
                            <!--                            31   ☀🌙⭐-->
                            <!--                            月亮个数以及星星个数-->
                            <span th:if="${item.userBean.level % 25 != 0 && item.userBean.level % 25 >= 5 && item.userBean.level % 25 < 25 }">
                                <span th:each="i : ${#numbers.sequence(1,item.userBean.level  % 25  / 5)}">
                                     ☪
                                </span>
                                <span th:if="${item.userBean.level  % 25 % 5 != 0}" th:each="i : ${#numbers.sequence(1,item.userBean.level  % 25 % 5)}">
                                   ★
                                </span>
                             </span>
                        </span>
                        <!-------------------------------end 等于大于25显示太阳------------------------------->
                        
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
